<template>
  <div>
    <Form ref="formValidate" :model="formValidate" :rules="ruleInline" inline>
      <FormItem
        label="选择类型："
        class="form-item"
        label-position="right"
        :label-width="100"
      >
        <RadioGroup v-model="formValidate.gender">
          <Radio
            :label="item.key"
            v-for="(item, index) in radioList"
            :key="index"
            >{{ item.title }}</Radio
          >
        </RadioGroup>
      </FormItem>
      <FormItem
        v-if="formValidate.gender == 1 && exportOpen !== '0'"
        label="发货类型："
        class="form-item"
        label-position="right"
        :label-width="100"
        :key="'test0'"
      >
        <RadioGroup v-model="formValidate.shipStatus">
          <Radio
            :label="item.key"
            v-for="(item, index) in shipType"
            :key="index"
            >{{ item.title }}</Radio
          >
        </RadioGroup>
      </FormItem>
      <!--  发货手动填写  -->
      <div
        v-if="formValidate.gender == 1 && formValidate.shipStatus == 1"
        :key="'test1'"
      >
        <FormItem
          label="快递公司："
          prop="logisticsCode"
          class="form-item"
          label-position="right"
          :label-width="100"
        >
          <Select
            v-model="formValidate.logisticsCode"
            filterable
            placeholder="请选择"
            @on-change="bindChange"
            :label-in-value="true"
            style="width: 100%"
          >
            <Option
              :value="item.code"
              v-for="(item, index) in logisticsList"
              :key="index"
              >{{ item.value }}</Option
            >
          </Select>
        </FormItem>
        <FormItem
          label="快递单号："
          prop="number"
          class="form-item"
          label-position="right"
          :label-width="100"
        >
          <Input
            v-model="formValidate.number"
            placeholder="请输入快递单号"
            style="width: 100%"
          ></Input>
          <div class="trip" v-if="formValidate.logisticsCode == 'shunfeng'">顺丰请输入单号 : 收件人或寄件人手机号后四位</div>
          <div class="trip" v-if="formValidate.logisticsCode == 'shunfeng'">例如：SF000000000000:3941</div>
        </FormItem>
      </div>
      <!--  电子面单打印  -->
      <div
        v-if="formValidate.gender == 1 && formValidate.shipStatus == 2"
        :key="'test2'"
      >
        <FormItem
          label="快递公司："
          prop="logisticsCode"
          class="form-item"
          label-position="right"
          :label-width="100"
        >
          <Select
            v-model="formValidate.logisticsCode"
            placeholder="请选择"
            style="width: 100%"
            @on-change="bindChange"
            filterable
            :label-in-value="true"
          >
            <Option
              :value="item.code"
              v-for="(item, index) in logisticsList"
              :key="index"
              >{{ item.value }}</Option
            >
          </Select>
        </FormItem>
        <FormItem
          label="电子面单："
          class="form-item"
          label-position="right"
          :label-width="100"
          v-if="orderTempList.length > 0"
        >
          <Select
            v-model="formValidate.electronic"
            placeholder="请选择电子面单"
            style="width: 80%"
          >
            <Option
              :value="item.temp_id"
              v-for="(item, index) in orderTempList"
              >{{ item.title }}</Option
            >
          </Select>
          <Button style="flex: 1; margin-left: 21px" @click="lookImg"
            >预览</Button
          >
          <viewer
            :images="orderTempList"
            class="viewer"
            ref="viewer"
            @inited="inited"
            style="display: none"
          >
            <img
              v-for="src in orderTempList"
              :src="src.pic"
              :key="src.id"
              class="image"
            />
          </viewer>
        </FormItem>
        <FormItem
          label="寄件人姓名："
          prop="sendName"
          class="form-item"
          label-position="right"
          :label-width="100"
        >
          <Input
            v-model="formValidate.sendName"
            placeholder="请输入寄件人姓名"
            style="width: 100%"
          ></Input>
        </FormItem>
        <FormItem
          label="寄件人电话："
          prop="sendPhone"
          class="form-item"
          label-position="right"
          :label-width="100"
        >
          <Input
            v-model="formValidate.sendPhone"
            placeholder="请输入寄件人电话"
            style="width: 100%"
          ></Input>
        </FormItem>
        <FormItem
          label="寄件人地址："
          prop="sendAddress"
          class="form-item"
          label-position="right"
          :label-width="100"
        >
          <Input
            v-model="formValidate.sendAddress"
            placeholder="请输入寄件人地址"
            style="width: 100%"
          ></Input>
        </FormItem>
      </div>
      <!--  送货  -->
      <div v-if="formValidate.gender == 2" :key="'test3'">
        <FormItem
          label="选择送货人："
          class="form-item"
          label-position="right"
          :label-width="100"
        >
          <Select
            v-model="formValidate.postPeople"
            placeholder="选择送货人"
            style="width: 100%"
          >
            <Option
              :value="item.id"
              v-for="(item, index) in deliveryList"
              :key="index"
              >{{ item.nickname }}</Option
            >
          </Select>
        </FormItem>
      </div>
      <div v-if="formValidate.gender == 3">
        <FormItem
          label="备注："
          props="msg"
          class="form-item"
          label-position="right"
          :label-width="100"
        >
          <Input placeholder="备注" v-model="formValidate.msg" />
        </FormItem>
      </div>
      <div class="mask-footer">
        <Button type="primary" @click="handleSubmit('formValidate')"
          >提交</Button
        >
        <Button @click="close">取消</Button>
      </div>
    </Form>
  </div>
</template>

<script>
import {
  orderExport,
  orderTemp,
  orderDeliveryAll,
  orderDelivery,
  getSender,
} from "@/api/kefu";
export default {
  name: "delivery",
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    orderId: {
      type: String | Number,
      default: "",
    },
    exportOpen: {
      type: String,
      default: "0",
    },
  },
  watch: {
    "formValidate.shipStatus": {
      handler(nVal, oVal) {
        if (nVal == 1) {
          this.getOrderExport("");
        }
        if (nVal == 2 && !this.formValidate.sendName) {
          getSender().then((res) => {
            this.formValidate.sendName = res.data.to_name;
            this.formValidate.sendPhone = res.data.to_tel;
            this.formValidate.sendAddress = res.data.to_add;
          });
          this.getOrderExport(1);
        }
        this.$refs["formValidate"].resetFields();
      },
      deep: true,
    },
    "formValidate.gender": {
      handler(nVal, oVal) {
        this.$refs["formValidate"].resetFields();
      },
      deep: true,
    },
  },
  data() {
    return {
      shipType: [
        {
          key: 1,
          title: "手动填写",
        },
        {
          key: 2,
          title: "电子面单打印",
        },
      ],
      radioList: [
        {
          key: 1,
          title: "发货",
        },
        {
          key: 2,
          title: "送货",
        },
        {
          key: 3,
          title: "虚拟",
        },
      ],
      ruleInline: {
        logisticsCode: [
          { required: true, message: "请选择快递公司", trigger: "change" },
        ],
        number: [
          { required: true, message: "请填写快递单号", trigger: "change" },
        ],
        sendName: [
          { required: true, message: "请填写寄件人姓名", trigger: "change" },
        ],
        sendPhone: [
          { required: true, message: "请填写寄件人手机", trigger: "change" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
        sendAddress: [
          { required: true, message: "请填写寄件人地址", trigger: "change" },
        ],
        msg: [{ required: true, message: "请填写备注信息", trigger: "change" }],
      },
      formValidate: {
        gender: 1,
        shipStatus: 1,
        logisticsCode: "", // 快递公司编号
        logisticsName: "", // 快递公司名称
        number: "", // 快递单号
        electronic: "", //电子面单
        sendName: "", //寄件人姓名
        sendPhone: "", // 寄件人电话
        sendAddress: "", //寄件人地址
        postPeople: "", // 配送员
        msg: "", // 备注
      },
      logisticsList: [],
      orderTempList: [],
      deliveryList: [],
    };
  },
  mounted() {
    this.getOrderExport();
    this.getDelivery();
  },
  methods: {
    // 获取配送人
    getDelivery() {
      orderDeliveryAll().then((res) => {
        this.deliveryList = res.data;
      });
    },
    //查看大图
    inited(viewer) {
      this.$viewer = viewer;
    },
    //物流公司
    getOrderExport(status) {
      orderExport(status ? status : "").then((res) => {
        this.logisticsList = res.data;
      });
    },
    handleSubmit(name) {
      if (this.formValidate.gender == 1) {
        this.$refs[name].validate((valid) => {
          let paramsData = {};
          paramsData.type = this.formValidate.gender;
          paramsData.express_record_type = parseFloat(
            this.formValidate.shipStatus
          );
          paramsData.delivery_name = this.formValidate.logisticsName;
          paramsData.delivery_code = this.formValidate.logisticsCode;
          if (valid) {
            // 手动
            if (
              this.formValidate.gender == 1 &&
              this.formValidate.shipStatus == 1
            ) {
              paramsData.delivery_id = this.formValidate.number;
            }
            // 电子
            if (
              this.formValidate.gender == 1 &&
              this.formValidate.shipStatus == 2
            ) {
              paramsData.to_name = this.formValidate.sendName;
              paramsData.to_tel = this.formValidate.sendPhone;
              paramsData.to_addr = this.formValidate.sendAddress;
              paramsData.express_temp_id = this.formValidate.electronic;
            }
            orderDelivery(this.orderId, paramsData)
              .then((res) => {
                this.$Message.success(res.msg);
                this.$emit("ok");
              })
              .catch((error) => {
                this.$Message.error(error.msg);
              });
          } else {
          }
        });
      }
      if (this.formValidate.gender == 2) {
        let people = {};
        this.deliveryList.forEach((el, index) => {
          if (el.id == this.formValidate.postPeople) {
            people = el;
          }
        });
        orderDelivery(this.orderId, {
          type: this.formValidate.gender,
          sh_delivery_name: people.wx_name,
          sh_delivery_id: people.phone,
          sh_delivery_uid: people.id,
        })
          .then((res) => {
            this.$Message.success(res.msg);
            this.$emit("ok");
          })
          .catch((error) => {
            this.$Message.error(error.msg);
          });
      }
      if (this.formValidate.gender == 3) {
        orderDelivery(this.orderId, {
          type: this.formValidate.gender,
          remark: this.formValidate.msg,
        })
          .then((res) => {
            this.$Message.success(res.msg);
            this.$emit("ok");
          })
          .catch((error) => {
            this.$Message.error(error.msg);
          });
      }
    },
    close() {
      this.$emit("close");
    },
    // 物流选中
    bindChange(val) {
      this.formValidate.logisticsName = val.label;
      if (this.formValidate.shipStatus == 2) {
        orderTemp({
          com: val.value,
        }).then((res) => {
          this.orderTempList = res.data.data;
        });
      }
    },
    lookImg() {
      if (this.formValidate.electronic) {
        this.orderTempList.forEach((el, index) => {
          if (el.temp_id == this.formValidate.electronic) {
            this.$viewer.view(index);
          }
        });
      } else {
        this.$Message.error("请选择电子面单");
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.form-item {
  width: 100%;
}

.trip {
  color: #ccc;
}
</style>
